<template>
	<div class="layout-padding detail-container" v-loading="loading">
		<HyPageHeader :title="title" />
		<div
			class="page-con"
			:style="{
				height: isShowBtn.isShowFooter && pageTape ? 'calc(100vh - 256px)' : 'calc(100vh - 186px)',
			}"
		>
			<HyCard title="单位信息">
				<DetailDescription :des-data="unitData" />
			</HyCard>
			<HyCard title="应用信息">
				<DetailDescription :des-data="appData" />
			</HyCard>
			<HyCard title="应用申报依据">
				<div class="app-declaration-list" v-for="item in appDeclarationData" :key="item.baseId">
					<span class="whitespace-nowrap apply-list-title">{{ formatType(item.type) }}：</span>
					<!-- <AppDeclarationInfo :list-data="appDeclarationData"/> -->
					<AppDeclarationInfo :list-data="item" />
				</div>
			</HyCard>
			<span
				>应用概述：<span>{{ overview }}</span></span
			>
			<span class="flex whitespace-nowrap"
				>应用总预算明细：
				<BudgetDetailsTable table-type="view" :table-data="tableData" :defaultExpandAll="true" />
			</span>
			<InfoCard title="网络资源信息">
				<span
					>网络资源类型(多选): <span>{{ formatNetSource(netResource) }}</span></span
				>
			</InfoCard>
			<div class="detail-img-list">
				<div class="detail-img-list__item" v-for="item in imgList" :key="item.fileId">
					<span>{{ imgListType[item.type] }}：</span>
					<FilePreview :type="'view'" :modelValue="[item]"></FilePreview>
				</div>
			</div>
			<History v-if="processInstanceId" :processInstanceId="processInstanceId" ref="historyRef" title="备案进度" />
		</div>

		<div class="foot-bar" v-if="isShowBtn.isShowFooter" v-show="pageTape">
			<el-button plain class="blue-button" @click="handleSub" v-if="isShowBtn.sub">申报</el-button>
			<el-button plain class="blue-button" @click="handleEdit" v-if="isShowBtn.edit">编辑</el-button>
			<el-button plain class="red-button" @click="handleDel" v-if="isShowBtn.del">删除</el-button>
			<el-button plain class="blue-button" @click="handleEdit" v-if="isShowBtn.reEdit">重新发起</el-button>
			<!-- <el-button plain class="red-button" @click="handleReBack(1)" v-if="isShowBtn.fillReset">撤销</el-button> -->
			<el-button plain class="red-button" @click="revoca(1)" v-if="isShowBtn.fillReset">撤销</el-button>
			<el-button plain class="blue-button" @click="handleAction" v-if="isShowBtn.send">推送</el-button>
			<!-- <el-button plain class="blue-button" @click="authDialogShow=true" v-if="isShowBtn.send">审核</el-button> -->
			<!-- <el-button plain class="red-button" @click="handleReBack(2)" v-if="isShowBtn.sendReset">撤销</el-button> -->
			<el-button plain class="red-button" @click="revoca(2)" v-if="isShowBtn.sendReset">撤销</el-button>
			<el-button plain class="blue-button" @click="handleAction" v-if="isShowBtn.sendAuth">审核</el-button>

			<!-- <el-button plain class="red-button" @click="handleReBack(3)" v-if="isShowBtn.opinReset">撤回</el-button> -->
			<el-button plain class="red-button" @click="revoca(3)" v-if="isShowBtn.opinReset">撤回</el-button>
			<el-button plain class="blue-button" @click="handleAction" v-if="isShowBtn.opinAuth">审核</el-button>
		</div>

		<!-- 推送|审核 -->
		<ExamineBox
			ref="examineBoxRef"
			:topState="false"
			:boxConfig="{ title: isShowBtn.send ? '推送确认' : '审核确认', width: '60%' }"
			@submitPass="submitPass"
		></ExamineBox>

		<!-- 退回 -->
		<SendBack ref="sendBackRef" :boxConfig="{ title: '驳回确认', width: '60%' }" @submitPass="submitPass"></SendBack>
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import HyPageHeader from '/@/components/HyPageHeader/index.vue';
import HyCard from '/@/components/HyCard/index.vue';
import InfoCard from '/@/views/areaDigitalApp/appDeclaration/InfoCard.vue';
import DetailDescription from '/@/views/areaDigitalApp/detail/DetailDescription.vue';
import AppDeclarationInfo from '/@/views/areaDigitalApp/detail/AppDeclarationInfo.vue';
import BudgetDetailsTable from '/@/views/areaDigitalApp/appDeclaration/BudgetDetailsTable.vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getCountyAppDeclare, delAppDeclare, appDeclareApprove, returnTask, isExsitById } from '/@/api/areaDigital';
import { downBlobFile } from '/@/utils/other';
import { FUND_RESOURCE_NAME } from '/@/views/areaDigitalApp/dictionary';
import HyForm from '/@/components/HyForm/index.vue';
import History from '@cqdcg/admin/views/flow/task/History/index';
import FilePreview from '/@/components/HyUploadCopy/index.vue';
import mittBus from '/@/utils/mitt';
import { useDict, useTreeDict } from '/@/hooks/dict';
import { revocation } from '@cqdcg/admin/views/flow/task/revocation';
import ExamineBox from '@cqdcg/admin/views/flow/task/examineBox';
import SendBack from '@cqdcg/admin/views/flow/task/sendBack';
export default defineComponent({
	name: 'index',
	components: {
		HyPageHeader,
		HyCard,
		InfoCard,
		DetailDescription,
		AppDeclarationInfo,
		BudgetDetailsTable,
		HyForm,
		History,
		FilePreview,
		ExamineBox,
	},
	setup() {
		const btnType = {
			isShowFooter: false, //底部操作区域

			sub: false, //申报
			edit: false, //编辑
			del: false, //删除
			reEdit: false, //重新发起
			fillReset: false, //申报撤销

			send: false, //推送
			sendReset: false, //推送撤销
			sendAuth: false, //推送审核

			opinAuth: false, //意见审核
			opinReset: false, //意见撤回
		};
		const isShowBtn = computed(() => {
			if (detailData.value.countryApproveStatus == 1) {
				//待申报
				btnType.sub = true;
				btnType.edit = true;
				btnType.del = true;
				btnType.isShowFooter = true;
			} else if (detailData.value.countryApproveStatus == 2) {
				//申报中
				if (detailData.value.countyPushStatus == 1) {
					//待推送
					btnType.send = true;
					btnType.fillReset = true;
					btnType.isShowFooter = true;
				} else if (detailData.value.countyPushStatus == 2) {
					if (detailData.value.countryOpinionStatus == 1) {
						//已推送
						btnType.sendReset = true;
						btnType.isShowFooter = true;
					}
					//改逻辑
					if (
						detailData.value.countryOpinionStatus == 2 &&
						detailData.value.countyPushStatus != 3 &&
						detailData.value.countyPushStatus != 4 &&
						detailData.value.countyPushStatus != 5
					) {
						console.log('asdasdasdasdasd');

						btnType.sendReset = false;
						btnType.opinReset = true;
						btnType.isShowFooter = true;
					}
				} else if (detailData.value.countyPushStatus == 3) {
					//待审核
					btnType.sendAuth = true;
					btnType.isShowFooter = true;
					// btnType.fillReset = true
					if (
						detailData.value.countryOpinionStatus == 2 &&
						detailData.value.countyPushStatus != 3 &&
						detailData.value.countyPushStatus != 4 &&
						detailData.value.countyPushStatus != 5
					) {
						btnType.opinReset = true;
					}
				} else {
				}

				if (detailData.value.countryOpinionStatus == 1 && detailData.value.countyPushStatus != 3) {
					//待审核
					btnType.opinAuth = true;
					btnType.isShowFooter = true;
				} else {
				}
				// else if(detailData.value.countryOpinionStatus==2||detailData.value.countryOpinionStatus==3){
				//   btnType.opinReset = true
				//   btnType.isShowFooter = true
				// }
			} else if (detailData.value.countryApproveStatus == 3) {
				//已通过
				btnType.isShowFooter = false;
			} else if (detailData.value.countryApproveStatus == 4) {
				//未通过
				if (route.query?.pageType == 1) {
					btnType.reEdit = true;
					btnType.isShowFooter = true;
				}
			}

			//处理列表跳转
			if (btnType.sendReset && btnType.opinAuth) {
				//推送撤销和意见审核
				if (!route.query?.pageType) {
					btnType.sendReset = false;
					btnType.opinAuth = true;
				}
				if (route.query?.pageType == 1) {
					btnType.isShowFooter = false;
				}
				if (route.query?.pageType == 2) {
					btnType.sendReset = true;
					btnType.opinAuth = false;
				}
				if (route.query?.pageType == 3) {
					btnType.sendReset = false;
					btnType.opinAuth = true;
				}
			}
			if (btnType.opinAuth) {
				if (route.query?.approveStatus == 2) {
					//当前人已审核
					btnType.isShowFooter = false;
				}
			}
			if (btnType.send && btnType.fillReset) {
				//推送和申报撤销
				if (!route.query?.pageType) {
					btnType.fillReset = false;
					btnType.send = true;
				}
				if (route.query?.pageType == 1) {
					btnType.fillReset = true;
					btnType.send = false;
				}
				if (route.query?.pageType == 2) {
					btnType.fillReset = false;
					btnType.send = true;
				}
				if (route.query?.pageType == 3) {
					btnType.isShowFooter = false;
				}
			}
			if (btnType.sendAuth && btnType.opinReset) {
				//推送审核和意见回
				if (!route.query?.pageType) {
					btnType.sendAuth = true;
					btnType.opinReset = false;
				}
				if (route.query?.pageType == 1) {
					btnType.isShowFooter = false;
				}
				if (route.query?.pageType == 2) {
					btnType.sendAuth = true;
					btnType.opinReset = false;
				}
				if (route.query?.pageType == 3) {
					btnType.sendAuth = false;
					btnType.opinReset = true;
				}
			}
			if (route.query?.pageType == 4) {
				btnType.isShowFooter = false;
			}
			if (btnType.sendAuth) {
				//推送审核
				if (route.query?.pageType == 1) {
					btnType.isShowFooter = false;
					// btnType.sendAuth = false
				}
				if (route.query?.pageType == 2 || !route.query?.pageType) {
					// btnType.isShowFooter = false
					btnType.fillReset = false;
				}
				if (route.query?.approveStatus == 2) {
					//当前人已审核
					btnType.isShowFooter = false;
				}
			}
			console.log(btnType, '----');
			console.log('approveStatus: %c' + route.query?.approveStatus, 'color:blue');
			return btnType;
		});

		const route: any = useRoute();
		const router = useRouter();
		const title = ref('');
		const unitData = ref([
			{ label: '区县名称：', text: '', key: 'countyNameName' },
			{ label: '区县责任单位：', text: '', key: 'countyResponsibleDeptName' },
			{ label: '区县预算单位：', text: '', key: 'countyBudgetUnit' },
			{ label: '市级业务主管部门：', text: '', key: 'countyManageDeptName' },
			{ label: '市级牵头部门(专题组组长单位)：', text: '', key: 'countyLeadDeptName' },
			{ label: '市级相关部门：', text: '', key: 'countyRelevantDeptName' },
		]);
		const appData = ref([
			{ label: '数字化应用名称：', text: '', key: 'appName' },
			{ label: '联系人：', text: '', key: 'principalName' },
			{ label: '联系电话：', text: '', key: 'principalPhone' },
			{ label: '应用开发类型：', text: '', key: 'projectType' },
			{ label: '应用预算年度：', text: '', key: 'budgetYear' },
			{ label: '应用开发起始时间：', text: '', key: 'developBeginDate' },
			{ label: '应用开发终止时间：', text: '', key: 'developEndDate' },
			{ label: '应用领域：', text: '', key: 'domain' },
			{ label: '应用发布端(多选)：', text: '', key: 'terminal' },
			{ label: '应用总投资（万元）：', text: '', key: 'totalBudget' },
			{ label: '应用年度预算（万元）：', text: '', key: 'yearBudget' },
			{ label: '资金来源：', text: '', key: 'fundResource' },
		]);
		const overview = ref(''); // 应用概述
		const appDeclarationData = ref([]);
		const tableData = ref([]);
		const netResource = ref('');
		const imgList = ref([]);
		const status = ref(1); //状态：1-待申报，2-申报中，3-被退回，4-通过，5-修改申请，6-待修改
		const { demand_type: DEMAND_TYPE, fund_resource: FUND_RESOURCE } = useDict('demand_type', 'fund_resource');

		const imgListType = {
			1: '总体业务架构图',
			2: '系统架构图',
			3: '部门专网材料',
			4: '部门专线材料',
			5: '互联网专线材料',
			6: '电子政务外网部门接入网材料',
			7: '数据流向图',
			8: '网络拓扑图',
			9: '业务事项清单',
			10: '资金计划报告',
			11: '正式书面函',
			12: '相关附件',
			13: '党中央国务院决策部署佐证材料',
		};

		const detailData = ref({});
		const appCode = ref('');
		const loading = ref(false);
		function initData() {
			title.value = route.query.title;
			loading.value = true;
			getCountyAppDeclare(route.query?.id)
				.then((res) => {
					if (res.ok) {
						detailData.value = res.data;
						appCode.value = res.data.appCode;
						if (res.data?.fundResource) {
							res.data.fundResource.split(',').forEach((item: number) => {
								if (item) {
									const rowArr = FUND_RESOURCE.value.filter((i) => i.value == item);
									let json = {
										label: (rowArr.length && rowArr[0].label) + '（万元）',
										text: '',
										key: FUND_RESOURCE_NAME[item],
									};
									appData.value.push(json);
									if (item == 6) {
										appData.value.push({
											label: '其他资金来源名称：',
											text: '',
											key: 'otherFund',
										});
									}
								}
							});
						}
						for (let key in res.data) {
							unitData.value.forEach((item) => {
								if (item.key === key) {
									item.text = res.data[key] || '--';
								}
							});
							appData.value.forEach((item) => {
								if (item.key === key) {
									item.text = res.data[key] || '--';
								}
							});
						}
						// console.log(appData.value,'-----------')
						overview.value = res.data?.summarize || '--';
						appDeclarationData.value = res.data?.declareBaseEntityList;
						tableData.value = res.data?.declareBudgetVoList;
						netResource.value = res.data?.netResource;
						imgList.value = res.data?.declareFileList;
						status.value = res.data?.status;
					} else {
						ElMessage.error(res.msg);
					}
				})
				.finally(() => {
					loading.value = false;
				})
				.catch(() => {
					loading.value = false;
				});
		}

		type checkParams = {
			declareId: string;
			checkFlag?: number | string;
		};
		function checkData(declareId: string, flag?: number | string) {
			//判断数据是否存在
			let params: checkParams = { declareId: declareId };
			if (flag) {
				params['checkFlag'] = flag;
			}
			return new Promise((resolve) => {
				isExsitById(params).then((res) => {
					if (res.ok) {
						if (res.data) {
							resolve(true);
						} else {
							loading.value = false;
							ElMessage.error('该数据已被删除');
							setTimeout(() => {
								mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
							}, 200);
						}
					} else {
						loading.value = false;
						ElMessage.error(res.msg);
						resolve(false);
					}
				});
			});
		}
		function handleSub() {
			ElMessageBox.confirm('是否确认提交申报？', '申报确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			})
				.then(async () => {
					loading.value = true;
					const result = await checkData(route.query?.id);
					if (result) {
						appDeclareApprove({
							processInstanceId: route.query.processInstanceId,
							paramMap: {
								operation: 'pass',
							},
						})
							.then((res) => {
								if (res.ok) {
									ElMessage.success('操作成功');
									setTimeout(() => {
										// 点击确认后调用请求，请求成功router.back()
										router.back();
									}, 300);
								} else {
									ElMessage.error(res.msg);
								}
							})
							.finally(() => {
								loading.value = false;
							});
					}
				})
				.catch(() => {});
		}
		async function handleEdit() {
			//编辑
			const result = await checkData(route.query?.id);
			if (result) {
				router.push({
					name: '新增备案',
					query: {
						tagsViewName: detailData.value.countryApproveStatus == 4 ? '新增备案' : '编辑备案',
						id: route.query?.id,
					},
				});
			}
		}
		function handleDel() {
			ElMessageBox.confirm('删除后将无法恢复', '你确定要删除吗？', {
				confirmButtonText: '确认',
				cancelButtonText: '取消',
				confirmButtonClass: 'el-button--danger',
				type: 'warning',
			})
				.then(async () => {
					loading.value = true;
					const result = await checkData(route.query?.id);
					if (result) {
						delAppDeclare([route.query?.id])
							.then((res) => {
								if (res.ok) {
									ElMessage.success('操作成功');
									setTimeout(() => {
										// 调用接口， 请求成功router.back()
										router.back();
									}, 300);
								} else {
									ElMessage.error(res.msg);
								}
							})
							.finally(() => {
								loading.value = false;
							});
					}
				})
				.catch(() => {});
		}
		//撤回
		const sendBackRef = ref(null);
		async function handleApprove(flag: number) {
			const result = await checkData(route.query?.id, flag);
			if (result) {
				sendBackRef.value.handle({
					processInstanceId: processInstanceId.value,
					paramMap: {},
				});
			}
		}
		//撤销
		async function revoca(flag: number) {
			const result = await checkData(route.query?.id, flag);
			if (result) {
				let obj = {
					processInstanceId: processInstanceId.value,
				};
				revocation(obj)
					.then((res: any) => {
						console.log('撤回接口成功回调');
						mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
						router.back();
					})
					.catch((err: any) => {
						console.log('取消弹框和失败回调');
					});
			}
		}
		//撤回
		function handleReBack(flag: number) {
			ElMessageBox.confirm(`确定${flag == 3 ? '撤回' : '撤销'}吗？`, `${flag == 3 ? '撤回' : '撤销'}确认`, {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			})
				.then(async () => {
					loading.value = true;
					const result = await checkData(route.query?.id, flag);
					if (result) {
						returnTask({
							processInstanceId: processInstanceId.value,
						})
							.then((res) => {
								if (res.ok) {
									ElMessage.success('操作成功');
									setTimeout(() => {
										// 调用接口， 请求成功router.back()
										mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
										router.back();
									}, 300);
								} else {
									ElMessage.error(res.msg);
								}
							})
							.finally(() => {
								loading.value = false;
							});
					}
				})
				.catch(() => {});
		}
		//推送 | 意见审核 | 推送审核
		const examineBoxRef = ref();
		async function handleAction() {
			const result = await checkData(route.query?.id);
			if (result) {
				if (isShowBtn.value.opinAuth) {
					examineBoxRef.value.setValue('type', 'true');
					examineBoxRef.value.setDisabled('type', true);
				}
				if (isShowBtn.value.send) {
					examineBoxRef.value.setlabelUser('推送部门选择', '请选择推送部门');
					examineBoxRef.value.setValue('type', 'true');
					examineBoxRef.value.setRemove('type', true);
					examineBoxRef.value.setValue('approveDesc', '');
					examineBoxRef.value.setRemove('approveDesc', true);
					examineBoxRef.value.setRemove('fileUrl', true);
				}
				examineBoxRef.value.handle({
					processInstanceId: route.query.processInstanceId,
					nodeId: route.query.nodeId,
					taskId: route.query.taskId,
					paramMap: {
						appCode: appCode.value,
					},
				});
			}
		}
		function submitPass() {
			mittBus.emit('onCurrentContextmenuClick', Object.assign({}, { contextMenuClickId: 1, ...route }));
			if (isShowBtn.value.send) {
				//推送
				router.push('/areaDigitalApp/examination/index');
			} else if (isShowBtn.value.opinAuth) {
				//意见审核
				router.push('/areaDigitalApp/reply/index');
			} else {
				//审查审核
				router.push('/areaDigitalApp/examination/index');
			}
		}
		const processInstanceId = ref();
		const nodeId = ref();
		const taskId = ref();
		const pageTape: any = ref(true);
		onMounted(() => {
			initData();
			processInstanceId.value = route.query.processInstanceId;
			nodeId.value = route.query.nodeId;
			taskId.value = route.query.taskId;
			if (route.query.pageTape == '已办') {
				pageTape.value = false;
			}
		});
		const historyRef = ref(null);
		const { network_area } = useTreeDict('network_area');
		function formatNetSource(type: any) {
			const data = type && type.split(',');
			let _data: string[] = [];
			data &&
				data.forEach((item: number) => {
					_data.push(findLabel(network_area.value, item));
				});
			return _data.join(',');
		}
		function findLabel(data, val) {
			let label = '';
			data.forEach((item) => {
				if (item.value == val) {
					label = item.label;
				}
				if (!label && item.children && item.children.length > 0) {
					label = findLabel(item.children, val);
				}
			});
			return label;
		}

		function downLoadFile(file) {
			console.log(file);
			if (file.url) {
				const fileData = file.url.split(',');
				fileData.forEach((item) => {
					if (item) {
						const fileStr = item.split('?') && item.split('?')[1];
						console.log(fileStr);
						if (fileStr) {
							downBlobFile(`/admin/sys-file/oss/file?${fileStr}`, {}, fileStr.split('=')[1]);
						} else {
							ElMessage.error('暂无数据');
						}
					}
				});
			}
		}
		function formatType(val) {
			const rowArr = DEMAND_TYPE.value.filter((item) => item.value == val);
			return rowArr.length && rowArr[0].label;
		}
		return {
			examineBoxRef,
			appCode,
			processInstanceId,
			nodeId,
			taskId,
			title,
			unitData,
			appData,
			overview,
			appDeclarationData,
			tableData,
			netResource,
			imgList,
			imgListType,
			status,
			detailData,
			historyRef,
			isShowBtn,
			loading,
			handleSub,
			handleEdit,
			handleDel,
			handleAction,
			handleReBack,
			formatNetSource,
			downLoadFile,
			submitPass,
			formatType,
			revoca,
			handleApprove,
			pageTape,
		};
	},
});
</script>

<style scoped lang="scss">
.del-btn {
	color: #d9001b;
	border: solid 1px #d9001b;
	background-color: #fff;
	&:hover {
		background-color: #eaeefe;
	}
}

.detail-container {
	height: auto;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	gap: 10px;
	> div.page-con {
		// height: calc(100vh - 266px);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.app-declaration-list {
		display: flex;
		margin-bottom: 20px;
		.apply-list-title {
			min-width: 154px;
			text-align: right;
		}
	}

	.detail-img-list {
		display: flex;
		flex-wrap: wrap;
		.detail-img-list__item {
			display: flex;
			width: 50%;
			padding: 20px;
			box-sizing: border-box;
			img {
				width: 160px;
				height: 96px;
			}
			.el-image {
				padding: 0 5px;
				max-width: 300px;
				max-height: 200px;
				width: 100%;
				height: 200px;
			}

			.image-slot {
				border: dashed 1px #dcdfe6;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				width: 100%;
				height: 100%;
				background: var(--el-fill-color-light);
				color: var(--el-text-color-secondary);
				font-size: 30px;
				p {
					width: 100%;
					text-align: center;
					font-size: 12px;
				}
			}
			.image-slot .el-icon {
				font-size: 30px;
			}
			// p{
			//   font-size: 12px;
			//   text-align: center;
			// }
			.info-oper {
				width: 100%;
				font-size: 12px;
				text-align: center;
				display: flex;
				align-items: center;
				.info-span {
					margin-left: 10px;
					display: flex;
					align-self: center;
					font-size: 16px;
					color: var(--el-color-primary) !important;
				}
			}
		}
	}

	.detail-timeline {
		width: 60%;
		margin: 0 auto;
		padding: 10px;
		box-sizing: border-box;
		.timeline-nav {
			display: flex;
			align-items: center;
			gap: 20px;
			padding-bottom: 10px;
			box-sizing: border-box;
			.name {
				font-size: 20px;
				font-weight: 700;
			}
			.phone {
				flex: 3;
			}
			.time {
				white-space: nowrap;
			}
		}
		.timeline-foot {
			display: flex;
			justify-content: space-between;
			white-space: nowrap;
			.msg {
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.status__warning {
				color: #e6a23c;
			}
			.status__danger {
				color: #f56c6c;
			}
			.status__primary {
				color: #409eff;
			}
		}
	}

	.foot-bar {
		background-color: #fff;
		border-top: 5px solid rgb(241, 241, 241);
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
	}
}
</style>
